<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Header from './common/Header.vue'
import Rank from './common/Rank.vue'
import requests from '../util/fetchUtils'

const title = ref("涨粉榜")

const dataList = ref({})
const type = ref(true)
const number = ref(1)
function convertJsonFormat(jsonData: any[]) {
    return jsonData.map(item => {
        const convertedItem = { ...item };
        convertedItem.follower = (convertedItem.follower / 10000).toFixed(1);
        convertedItem.follower_difference = (convertedItem.follower_difference / 10000).toFixed(1);
        convertedItem.data_time = new Date(convertedItem.data_time).toLocaleString();
        return convertedItem;
    });
}

const getRankDesc = (day: number) => {
    type.value = true
    if (day == 1) {
        number.value = 1
    } else if (day == 7) {
        number.value = 2
    }
    //请求数据
    let follower = requests<any>("/getRankDesc/" + day)
    follower.then(data => {
        dataList.value = convertJsonFormat(data)
    })
}

const getRankAsc = (day: number) => {
    type.value = false
    if (day == 1) {
        number.value = 3
    } else if (day == 7) {
        number.value = 4
    }
    //请求数据
    let follower = requests<any>("/getRankAsc/" + day)
    follower.then(data => {
        dataList.value = convertJsonFormat(data)
    })
}
onMounted(() => {
    getRankDesc(1)
})
</script>
<template>
    <div class="fans container">
        <Header>{{ title }}</Header>
        <div class="date-nav">
            <div class="item" :class="{ active: number == 1 }" @click="getRankDesc(1)">日增粉</div>
            <div class="item" :class="{ active: number == 2 }" @click="getRankDesc(7)">周增粉</div>
            <div class="item" :class="{ active: number == 3 }" @click="getRankAsc(1)">日减粉</div>
            <div class="item" :class="{ active: number == 4 }" @click="getRankAsc(7)">周减粉</div>
        </div>
    </div>
    <template v-for="item in dataList">
        <Rank :user-info="item" :type="type"></Rank>
    </template>
</template>
<style lang="less">
@import url(../assets/css/base.less);

.fans {
    width: 10rem;
    margin: 0 auto;

    .date-nav {
        display: flex;
        margin-top: .5333rem;
        padding-bottom: .6133rem;
        justify-content: center;

        .item {
            font-size: .32rem;
            height: .64rem;
            background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(22, 41, 86, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
            border: .0133rem solid rgba(75, 194, 255, 0.2);
            box-shadow: inset 0px 0px .16rem rgba(75, 194, 255, 0.3);
            line-height: .64rem;
            padding-left: .2667rem;
            padding-right: .2667rem;

            &:not(:last-child) {
                margin-right: .5333rem;
            }

            &.active {
                background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(37, 68, 137, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
                border: .0133rem solid rgba(75, 194, 255, 0.6);
            }
        }
    }
}
</style>